<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招标单位管理端</title>
    <style>
        .user-info {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
            background-color: #eee;
        }
        
        .user-info span {
            margin-right: 10px;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .a1{
            padding-top: 10px;
        }
        .left-btn {
            margin-right: auto;
        }
        .btn {
            padding: 5px 10px;
            background-color: #ccc;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>招投标管理系统</h1>
    </div>

    <div id="app">
        <!-- 占位栏 -->
        <div class="a1"></div>
        <!-- 导航栏 -->
        <div class="user-info">
            <div class="left-btn">
                <el-row>
                    <el-button type="primary" @click="dialogFormVisible = true" >发布招标信息</el-button>
                    <el-button type="success" @click="getComInfo">查看厂家信息</el-button>
                </el-row>
            </div>
            <span>欢迎您：{{ currentUser }}</span>
            <el-button type="danger" @click="logout">退出</el-button>
        </div>

        <!-- 发布招标信息栏 -->
        <el-dialog title="招标信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="机电设备名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="型号" :label-width="formLabelWidth">
                    <el-input v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="包装要求" :label-width="formLabelWidth">
                    <el-input v-model="form.packing" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="招标截止日期" :label-width="formLabelWidth">
                    <el-input v-model="form.deadline" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="投标保证金" :label-width="formLabelWidth">
                    <el-input v-model="form.bail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addInfo">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 查看机电设备生产厂家信息 -->
        <el-dialog title="厂家信息" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="id" label="厂家编号" width="50"></el-table-column>
                <el-table-column property="companyName" label="厂家名称" width="200"></el-table-column>
                <el-table-column property="name" label="法人" width="150"></el-table-column>
                <el-table-column property="tel" label="联系电话" width="200"></el-table-column>
                <el-table-column property="price" label="注册资本"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- 招标信息显示栏 -->
        <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
              prop="id"
              label="招标id"
              width="180">
            </el-table-column>
              <el-table-column
                prop="name"
                label="机电设备名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="type"
                label="型号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="packing"
                label="包装要求">
              </el-table-column>

              <el-table-column
                prop="number"
                label="数量">
              </el-table-column>

              <el-table-column
                prop="deadline"
                label="招标截止日期">
              </el-table-column>

              <el-table-column
                prop="bail"
                label="投标保证金">
              </el-table-column>
              
              <el-table-column>
                <template slot-scope="scope">
                    <el-button type="danger" @click="editInfo(scope.row)">修改</el-button>
                </template>
              </el-table-column>
        
            </el-table>
        </template>

        

    </div>

    <script src="js/axios-0.18.0.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">



    <script>
        new Vue({
            el:"#app",
            mounted(){
                this.selectAll();
                this.first();
            },
            data() {
                return {
                    currentUser: "",
                    tableData: [],
                    gridData:[
                        {
                            id:'',
                            companyName:'',
                            name:'',
                            tel:'',
                            price:''
                        }
                    ],
                    dialogFormVisible: false,
                    dialogTableVisible: false,
                    form: {
                        name: '',
                        type: '',
                        packing: '',
                        number: '',
                        deadline: '',
                        bail: ''
                    },
                    formLabelWidth: '120px',
                    selectedRow: null
                }
            },
            methods: {
                //获取生产厂家信息
                getComInfo(){
                    this.dialogTableVisible = true;
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'comInfo',
                        success:function(resp){
                            _this.gridData = resp;
                        }
                    })
                },
                //查询招标信息
                selectAll(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'unit/getAll',
                        success:function(resp){
                            _this.tableData = resp;
                        }
                    })
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                    return 'warning-row';
                    } else if (rowIndex === 3) {
                    return 'success-row';
                    }
                    return '';
                },
                addInfo() {  //根据`selectedRow`是否为空来判断是添加还是修改数据
                    var _this = this;
                    if (this.selectedRow) {
                        // 修改数据
                        $.ajax({
                            method:'post',
                            url:'/unit/update',
                            data:{
                                id: this.selectedRow.id, // 根据实际情况传递选中行的唯一标识符
                                name: this.form.name,
                                type: this.form.type,
                                packing: this.form.packing,
                                number: this.form.number,
                                deadline: this.form.deadline,
                                bail: this.form.bail
                            },
                            success:function(data){
                                if(data != 0){
                                    alert("修改成功");
                                    _this.selectAll();
                                    _this.dialogFormVisible = false;
                                }else{
                                    alert("修改失败")
                                }
                            },
                        });
                    }else{
                        //添加数据
                        $.ajax({
                        method:'post',
                        url:'/unit/add',
                        data:{
                            name: this.form.name,
                            type: this.form.type,
                            packing: this.form.packing,
                            number: this.form.number,
                            deadline: this.form.deadline,
                            bail: this.form.bail
                            
                        },
                        success:function(data){
                            if(data == 1){
                                alert("添加成功");
                                _this.selectAll();
                                _this.dialogFormVisible=false;
                            }else{
                                alert("失败");
                            }
                        }
                    })
                    }
                },
                editInfo(row) {
                    this.selectedRow = row; // 保存选中行的数据
                    this.form.name = row.name;
                    this.form.type = row.type;
                    this.form.packing = row.packing;
                    this.form.number = row.number;
                    this.form.deadline = row.deadline;
                    this.form.bail = row.bail;
                    this.dialogFormVisible = true; // 打开修改对话框
                },
                // 获取用户名
                first(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'userInfo',
                        success:function(resp){
                            _this.currentUser=resp.companyName;
                        }
                    })
                },
                logout(){
                    $.ajax({
                        method:'post',
                        url:'logout',
                        success:function(resp){
                            alert("退出成功！");
                        }
                    })
                    location.replace("/index.html");
                },
                
            }


        })  //vue

    </script>
</body>
</html>